.radar-chart .level {
    stroke: grey;
    stroke-width: 0.5;
  }
  
  .radar-chart .axis line {
    stroke: grey;
    stroke-width: 1;
  }
  .radar-chart .axis .legend {
    font-family: sans-serif;
    font-size: 10px;
  }
  .radar-chart .axis .legend.top {
    dy:1em;
  }
  .radar-chart .axis .legend.left {
    text-anchor: start;
  }
  .radar-chart .axis .legend.middle {
    text-anchor: middle;
  }
  .radar-chart .axis .legend.right {
    text-anchor: end;
  }
  
  .radar-chart .tooltip {
    font-family: sans-serif;
    font-size: 13px;
    transition: opacity 200ms;
    opacity: 0;
  }
  .radar-chart .tooltip.visible {
    opacity: 1;
  }
  
  /* area transition when hovering */
  .radar-chart .area {
    stroke-width: 2;
    fill-opacity: 0.5;
  }
  .radar-chart.focus .area {
    fill-opacity: 0.1;
  }
  .radar-chart.focus .area.focused {
    fill-opacity: 0.7;
  }
  
  .radar-chart .circle {
    fill-opacity: 0.9;
  }
  
  /* transitions */
  .radar-chart .area, .radar-chart .circle {
    transition: opacity 300ms, fill-opacity 200ms;
    opacity: 1;
  }
  .radar-chart .d3-enter, .radar-chart .d3-exit {
    opacity: 0;
  }